import InfoPanel from "./components/InfoPanel.tsx";
import RadarBar from "./components/RadarBar.tsx";
import Relation from "./components/Relation.tsx";
import MapChart from "./components/MapChart.tsx";
import VerticalBar from "./components/VerticalBar.tsx";
import RadiueBar from "./components/RadiueBar.tsx";
import WordCloud from "./components/WordCloud.tsx";
import { defineComponent, ref, onMounted } from "vue";
import useData from "./use/useData.ts";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { EE } from "./event/index.ts";
import VideoPanel from "./components/VideoPanel.tsx";
import CvPanel from "./components/CvPanel.tsx";
import TaskNavPanel from "./components/TaskNavPanel.tsx";
import ChargePanel from "./components/ChargePanel.tsx";
import SensorPanel from "./components/SensorPanel.tsx";
import BatteryTempPanel from "./components/BatteryTempPanel.tsx";
import BatteryVoltagePanel from "./components/BatteryVoltagePanel.tsx";
import TaskPanel from "./components/TaskPanel.tsx";

const App = defineComponent({
  setup() {
    const { dataRef, dataCV } = useData();
    const isShowLeft = ref(true);
    const isShowTaskNavPanel = ref(false);

    const registerTaskNavPanelEvent = () => {
      EE.on("toggleTaskNavPanel", () => {
        if (isShowTaskNavPanel.value) {
          isShowTaskNavPanel.value = false;
          document.body.style.cursor = "";
        } else {
          isShowTaskNavPanel.value = true;
          document.body.style.cursor = "crosshair";
        }
      });
    };

    // 挂载的时候初始化地图的位置
    const initMapPos = () => {
      if (isShowLeft.value) {
      } else {
        EE.emit("moveX", -20);
      }
    };

    const handelClick = () => {
      console.log(123);
    };

    const handleFolderLeftPanel = () => {
      if (isShowLeft.value) {
        isShowLeft.value = false;
        EE.emit("moveX", -20);
      } else {
        isShowLeft.value = true;
        EE.emit("moveX", 20);
      }
      EE.emit("togglePanel");
    };

    const leftPanelEle = () => {
      if (isShowLeft.value) {
        return (
          <>
            <div class="flex-1 bg-opacity-0 bg-black-300 p-3 flex flex-col z-20 relative">
              <div
                class="absolute right-0 top-2 w-8 h-8  hover:bg-slate-300 rounded-lg"
                onClick={handleFolderLeftPanel}
              >
                <ArrowLeft />
              </div>

              {/* <!-- 横向柱状图 --> */}
              <InfoPanel
                class="h-1/3 box-border pb-4"
                data={dataRef?.value?.mileageData.mileages}
              ></InfoPanel>

              {/* <!-- 充电次数统计 --> */}
              <ChargePanel
                class="h-1/3 box-border pb-4"
                data={dataRef?.value?.chargeData.charges}
              ></ChargePanel>

              {/* 雷达图 */}
              {/* <RadarBar
                class="h-1/3 box-border pb-4"
                data={dataRef?.value?.riskData.risks}
              /> */}

              {/* <!-- 数据传递关系图 --> */}
              {/* <Relation
                class="h-1/3"
                data={dataRef?.value?.relationData.relations}
              /> */}
              <SensorPanel
                class="h-1/3"
                data={dataRef?.value?.sensorData.sensors}
              />
            </div>
          </>
        );
      } else {
        return (
          <>
            <div
              onClick={handleFolderLeftPanel}
              class="absolute left-0 top-10 w-8 h-8 bg-opacity-30 bg-slate-500 hover:bg-slate-300 z-20 rounded-lg"
            >
              <ArrowRight />
            </div>
          </>
        );
      }
    };

    const rightPanelEle = () => {
      if (isShowLeft.value) {
        return (
          <>
            <div class="flex-1 bg-opacity-0 bg-slate-300 p-3 flex flex-col z-20">

              {/* <!-- 竖向柱状图 --> */}
              {/* <VerticalBar
                class="h-1/3 box-border pb-4"
                data={dataRef?.value?.verData.servers}
              /> */}

              {/* 电池温度曲线 */}
              <BatteryTempPanel
                class="h-1/3 box-border pb-4"
                data={dataRef?.value?.batTempData.batTemps}
              ></BatteryTempPanel>

              {/* <!-- 环形资源站比图 --> */}
              {/* <RadiueBar
                class="h-1/3 box-border pb-4"
                data={dataRef?.value?.abnormalData.abnormals}
              /> */}

              <TaskPanel
                class="h-1/3 box-border pb-4"
                data={dataRef?.value?.taskData.tasks}
              ></TaskPanel>

              {/* <!-- 文档云图 --> */}
              {/* <WordCloud
                class="h-1/3 box-border"
                data={dataRef?.value?.wordCloudData.datas}
              /> */}

              <BatteryVoltagePanel
                class="h-1/3 box-border pb-4"
                data={dataRef?.value?.batTempData.batTemps}
              ></BatteryVoltagePanel>
            </div>
          </>
        );
      } else {
        return (
          <>
            <div class="flex-1 bg-opacity-50 bg-slate-500 p-3 flex flex-col z-20">
              {/* <!-- Video Panel --> */}
              <VideoPanel class="h-1/2 box-border pb-4" />

              {/* <!-- CV Panel --> */}
              <div class="h-1/2 box-border w-full ">
                <CvPanel cv={dataCV?.value} />
              </div>
            </div>
          </>
        );
      }
    };

    onMounted(async () => {
      // 设置地图的初始位置
      initMapPos();
      // register task bottom show event
      registerTaskNavPanelEvent();
    });

    return () =>
      dataCV?.value ? (
        <>
          <MapChart
            class="absolute top-0 bottom-0 left-0 right-0 z-10"
            data={dataRef?.value?.mapData}
          />
          <div
            onClick={handelClick}
            class="text-center bg-cover bg-center h-screen text-white flex overflow-hidden -z-20 pt-8"
          >
            {leftPanelEle()}
            <div class="w-1/2 mr-5 flex flex-col  bg-slate-500 opacity-50 -z-10"></div>
            {dataCV.value ? rightPanelEle() : <></>}
          </div>
          {isShowTaskNavPanel.value ? <TaskNavPanel></TaskNavPanel> : <></>}
        </>
      ) : (
        <h1 class={"text-center"}>数据加载中。。。</h1>
      );
  },
});

export default App;

